<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <#include "common.ftl">
    <style>
        body {
            background-color: #F2F2F2;;
        }
    </style>
</head>
<body>
<ul class="layui-nav" lay-filter="tab">
    <li class="layui-nav-item"><a href="${ctx}/index">首页</a></li>
    <li class="layui-nav-item"><a href="${ctx}/user/index">用户</a></li>
    <li class="layui-nav-item"><a href="${ctx}/permission/index">菜单</a></li>
    <li class="layui-nav-item"><a href="">学习</a></li>
    <li class="layui-nav-item"><a href="${ctx}/photo/index">相册</a></li>
    <li class="layui-nav-item"><a href="${ctx}/user/onLineUsers">在线用户</a></li>
    <li class="layui-nav-item layui-this"><a href="${ctx}/gen/index">代码生成</a></li>
    <li class="layui-nav-item" style="float: right"><a href="${ctx}/layout">退出</a></li>
</ul>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="demoTable">
                数据库名称：
                <div class="layui-inline">
                    <select class="layui-select" id="dataBaseName" name="dataBaseName" lay-verify="" lay-search>
                        <option value="mapp" selected>mapp</option>
                    </select>
                </div>
                <button id="search" class="layui-btn" data-type="reload">搜索</button>
            </div>
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getColumn">表详细信息</button>

    </div>
</script>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;
        element.on('nav(tab)', function(data){
            var href = data[0].href;
            location.href = href;
        })
    })

    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        var tableIns = table.render({
            elem: '#demo'
            ,height: 'full - 200'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,url: '${ctx}/gen/getTable' //数据接口
            ,where: {dataBaseName : $("#dataBaseName").val()}
            ,toolbar: '#toolbarDemo'
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{title:'序号', type:'numbers'}
                ,{field: 'dataBaseName', title: '库名称'}
                ,{field: 'tableName', title: '表名'}
                ,{field: 'engine', title: '存储引擎'}
                ,{field: 'comment', title: '说明'}
                ,{field: 'createTime', title: '创建时间'}
            ]]
            ,response: {
                countName: 'total'
                ,dataName: 'records'
            }
        });

        active = {
            reload: function(){
                var username = $('#username');
                //执行重载
                tableIns.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        username: username.val()
                    }
                });
            }
        };

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getColumn':
                    var data = checkStatus.data;
                    var dataBaseName = data[0].dataBaseName;
                    var tableName = data[0].tableName;
                    var comment = data[0].comment;

                    layer.open({
                        type: 2,
                        content: ['${ctx}/gen/column?dataBaseName=' + dataBaseName + '&tableName=' + tableName],
                        maxmin: true,
                        title: '表名称：' + tableName + ' 说明：' + comment,
                        area: ['1400px', '600px'],
                        btn: ['生成代码', '关闭'],
                        btn1: function (index, layero) {
                            var body = layer.getChildFrame('body', index);
                            var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
                            iframeWin.generate();
                        }
                    });
                    break;
            };
        });
    });
    // 重载
    $('#search').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
</script>
</body>
</html>